<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="/static/plugins/Buttons-1.4.0/css/buttons.bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="/static/plugins/bootstrapvalidator/dist/css/bootstrapValidator.min.css" />
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.insert {
				width: 100%;
				min-height: 250px;
				margin: 0 auto;
				text-align: center;
				padding-top: 10px;
				padding-bottom: 10px;
				border-radius: 10px;
				text-align: center;
				background-color: #ECF0F5;
			}
			
			.modal-content {
				border-radius: 20px;
			}
			
			.title {
				font-size: 24px;
				font-weight: bold;
				line-height: 40px;
				margin-bottom: 20px;
			}
			
			.main {
				width: 280px;
				margin: 0 auto;
				text-align: left;
			}
			
			.main input {
				height: 33px;
			}
			
			.black {
				font-size: 25px;
				float: right;
			}
			
			.marginLeft {
				margin-left: 30px;
			}
			
			.error1,
			.error2,
			.error3,
			.error4,
			.error5,
			.error6 {
				display: none;
				color: #DD4B39;
				font-size: 12px;
			}
			
			.inputTitle {
				display: inline-block;
				width: 100px;
				text-align: right;
			}
			
			.main input {
				width: 160px;
			}
			
			.main .Sex1,
			.main .Sex2 {
				width: 30px;
			}
			
			#roleinput {
				width: 158px;
				height: 33px;
			}
			
			.form-control {
				display: inline-block;
			}
		</style>
	</head>

	<body>
		<div class="insert">
			<div class="title">
				新增权限
			</div>
			<div class="main">
				<form>
					<p><span class="inputTille">功能名称：</span>
						<select name="roleid" id="roleinput">
						</select>
					</p>
					<div class="form-group">
						<p>功能编号：<input class="form-control number" type="text" name="number" value="1" /></p>
						<p class="error1"></p>
					</div>
					<div class="form-group">
						<p>功能类型：<input class="form-control type" type="text" name="type" value="Oprate" /></p>
					</div>
					<div class="form-group">
						<button type="button" class="btn btn-primary marginLeft" data-dismiss="modal">取消</button>
						<button type="submit" class="btn btn-primary submit marginLeft">保存</button>
						<button type="button" class="btn btn-primary marginLeft" data-dismiss="modal">返回</button>
					</div>
				</form>
			</div>
		</div>
		<script src="/static/plugins/Buttons-1.4.0/js/buttons.bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/plugins/bootstrapvalidator/dist/js/bootstrapValidator.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				var tables = $('#table_id_example').DataTable();
				$.ajax({
					url: "/get/power",
					type: "post",
					acync: true,
					success: function(data) {
						var result = $.parseJSON(data);
						for(var i = 0; i < result.length; i++) {
							var opt = $("<option>" + result[i]['PowerName'] + "</option>");
							$(opt).attr("value", result[i]['PowerName']);
							$("#roleinput").append(opt);
						}
					}
				});
				$("#roleinput").on("change", function() {
					var power = $("#roleinput").val();
					$.ajax({
						type: "post",
						url: "/get/powermsg",
						async: true,
						data: {
							power: power
						},
						success: function(data) {
							var response = $.parseJSON(data);
							$(".number").val(response['ID']);
							$(".type").val(response['ActionType']);
						}
					});
				});
				$(".submit").on("click", function() {
					var OpwerName = $("#roleinput").val();
					var num = $(".number").val();
					var type = $(".type").val();
					var roleid = localStorage.getItem("roleid");
					var table1 = $("#power_table").DataTable();
					$.ajax({
						type: "post",
						url: "/power/add",
						async: true,
						data: {
							roleid: roleid,
							num: num,
						},
						success: function(data) {
							//							console.log(data);
							if(data == 'a') {
								$.ajax({
									type: "post",
									url: "/insert/power",
									async: true,
									data: {
										roleid: roleid,
										num: num,
									},
									success: function(data) {
										console.log(data);
										if(data == 1) {
											alert("添加成功！")
											table1.draw(false);
										} else {
											alert("添加失败！");
										}

									}
								})
							} else {
								power();
							}
						}
					});
					return false;
				})

			})
		</script>
	</body>

</html>